Combining more than two Line objects with multiple Y axes

This demonstration shows how you can use the YAxis drawing API object to draw multiple axes on your chart.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.drawing.yaxis.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    var gutterLeft = 160,
        gutterRight = 40,
        gutterTop   = 25;




    /**
    * This draws the extra axes. It's run whenever the line3 object is drawn
    */
    yaxis1 = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: 159,
        options: {
            colors: 'red',
            textColor: 'red',
            max: 10,
            title: 'Density',
            textAccessible: true
        }
    }).draw()

    yaxis2 = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: 110,
        options: {
            colors: 'green',
            textColor: 'green',
            max: 100,
            title: 'Speed',
            textAccessible: true
        }
    }).draw()

    yaxis3 = new RGraph.Drawing.YAxis({
        id: 'cvs',
        x: 50,
        options: {
            colors: 'blue',
            textColor: 'blue',
            max: 30,
            title: 'Pressure',
            textAccessible: true
        }
    }).draw();




    var line1 = new RGraph.Line({
        id: 'cvs',
        data: [1,3,5,2,5,6,8,4,4,5,3,6],
        options: {
            ymax: 10,
            hmargin: 5,
            gutterRight: gutterRight,
            gutterLeft: gutterLeft,
            gutterTop: gutterTop,
            labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            colors: ['red', 'green', 'blue'],
            key: ['Density', 'Speed', 'Pressure'],
            keyPosition: 'gutter',
            keyPositionGutterBoxed: false,
            keyPositionX: 275,
            noaxes: true,
            ylabels: false,
            shadow: false,
            textAccessible: true
        }
    }).draw()


    var line2 = new RGraph.Line({
        id: 'cvs',
        data: [54,53,56,58,57,53,49,52,53,56,61,58],
        options: {
            ymax: 100,
            backgroundGrid: false,
            colors: ['green'],
            hmargin: 5,
            gutterRight: gutterRight,
            gutterLeft: gutterLeft,
            gutterTop: gutterTop,
            tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            noaxes: true,
            ylabels: false,
            shadow: false,
            textAccessible: true
        }
    }).draw()

    var line3 = new RGraph.Line({
        id: 'cvs',
        data: [31,35,32,36,34,32,33,35,28,17,18,18],
        options: {
            ymax: 50,
            backgroundGrid: false,
            ylabels: false,
            colors: ['blue'],
            hmargin: 5,
            gutterRight: gutterRight,
            gutterLeft: gutterLeft,
            gutterTop: gutterTop,
            tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            noaxes: true,
            shadow: false,
            textAccessible: true
        }
    }).draw();
</script>